<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title></title>
    <style>
        /* 设置整个滚动条的背景色为透明 */
        ::-webkit-scrollbar {
            background-color: transparent;
        }

        /* 设置滚动条轨道的颜色为透明 */
        ::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* 设置滚动条的颜色为透明 */
        ::-webkit-scrollbar-thumb {
            background-color: transparent;
            /* 可以设置一个透明度，如50%透明 */
            opacity: 0.5;
        }

        /* 设置当鼠标悬停在滚动条上时的颜色为透明 */
        ::-webkit-scrollbar-thumb:hover {
            background-color: transparent;
        }
        body {
            margin: 0;
            padding: 0;
            background-color: #f6f6f6;
        }
        .card {
            margin: 0 12px;
            background-color: #fff;
            border-radius: 7px;
            padding: 0 14px;
        }
        .item {
            position: relative;
            border-bottom: 1px solid #f4f4f4;
        }
        .title {
            font-size: 16px;
            line-height: 20px;
            padding: 15px 0 0 0;
            font-weight: 500;
            color: #333;
        }
        .head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 44px;
            font-size: 13px;
            color: #666;
        }
        .item .img {
            width: 16px;
            height: 16px;
            transform: rotate(90deg);
            transition-property: transform;
            transition-duration: 0.3s;
            transition-timing-function: ease;
        }
        .item .cont {
            position: relative;
            font-size: 12px;
            line-height: 20px;
            color: #999;
            display: none;
            overflow: hidden;
            box-sizing: border-box;
        }
        .item .cont .text {
            padding-bottom: 10px;
        }

        .active .img {
            transform: rotate(-90deg);
        }
    </style>
</head>
<body>
<div>
    <div class="card">
        <div class="title">
            常见问题
        </div>
        <div class="list">
            <div class="item">
                <div class="head">
                    <div class="name">做兼职需要收费吗？</div>
                    <img class="img" src="{{asset('customer-service/static/right.png')}}" alt="" />
                </div>
                <div class="cont">
                    <div class="text">做兼职无需任何收费，包括平台和商家，如果遇到以各种理由收费的，请及时向平台客服反馈。</div>
                </div>
            </div>
            <div class="item">
                <div class="head">
                    <div class="name">新手必读</div>
                    <img class="img" src="{{asset('customer-service/static/right.png')}}" alt="" />
                </div>
                <div class="cont">
                    <div class="text">
                        <div>1.请不要缴纳商家以任何理由收取的费用,如遇到请拒绝支付并向本平台客服举报;</div>
                        <div>2.请不点击任何需要提供社交账号、银行卡、支付密码等链接,不要轻易将短信验证码转发给他人,不要参与转账、投资等;</div>
                        <div>3.请不要参与企业代付,0元付,索要付款码等,均视为潜在诈骗行为;</div>
                        <div>4.请不要触碰涉及违法犯罪的兼职,包括但不限于刷单,传销,租售手机卡、银行卡等,如有发现请及时向本平台客服反馈;</div>
                        <div>5.请不要参与商家在平台取消录取后私下联系的兼职,不经过平台线上保护的兼职岗位,如发生意外或纠纷就无法获得本平台及时有力的保障。</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="head">
                    <div class="name">工资如何结算?</div>
                    <img class="img" src="{{asset('customer-service/static/right.png')}}" alt="" />
                </div>
                <div class="cont">
                    <div class="text">每个职位都有工资金额和结算方式,报名后,请立即联系商家确认好工作要求和工资结算方式,完工后找商家按约定的方式结算工资。</div>
                </div>
            </div>
            <div class="item">
                <div class="head">
                    <div class="name">遇到异常职位如何处理?</div>
                    <img class="img" src="{{asset('customer-service/static/right.png')}}" alt="" />
                </div>
                <div class="cont">
                    <div class="text">如遇到职位描述与实际不符,以各种理由收取费用,涉及违规违法的内容,请及时联系平台客服举报。</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{asset('customer-service/static/jquery.js')}}"></script>
<script>
    $(document).ready(function () {
        $(".list").on("click", ".item", function (event) {
            $(this).toggleClass("active");
            $(this).siblings().removeClass("active");
            $(this).find(".cont").slideToggle(150);
            $(this).siblings().find(".cont").slideUp(150);
        });
    });
</script>
</body>
</html>
